<template>
  <div class="share">
    <van-button type="default" @click="showPoster">分享</van-button>
    <van-dialog v-model="show" :showConfirmButton="false" width="256">
      <img class="img" src="@/assets/share-img.jpg" />
      <!-- 海报名片 -->
    <div class="card">
      <!-- 左侧 -->
      <div class="card-l">
        <!-- 名称 -->
        <div class="addr-name">天福国家湿地森林公园</div>
        <!-- 价格 -->
        <div class="price-wrap">
          <div class="price-label">抢购价</div>
          <div class="price">
            ¥
            <strong>158</strong>
          </div>
          <div class="price price-through">¥199</div>
        </div>
        <!-- 地址 -->
        <div class="addr">
          <div>地址:</div>
          <div>昆山市花桥经济开发区沿沪大道 888号</div>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="card-r">
        <img class="qr" src="@/assets/qr2.jpg" alt="二维码" />
        <p>长按识别二维码</p>
      </div>
    </div>
    </van-dialog>
    <div class="ft-wrap" v-show="show">
      <div>
        <img src="@/assets/link.png" alt="分享好友" />
        <p>分享好友</p>
      </div>
      <div>
        <img src="@/assets/save.png" alt="保存海报" />
        <p>保存海报</p> 
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    };
  },
  methods: {
    showPoster() {
      this.show = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.share {
  .img {
    height: 368px;
    width: 256px;
    vertical-align: top;
    margin-bottom: 88px;
  }
  .van-dialog{
    border-radius: 4px
  }
  /deep/.van-dialog__content{
    position: relative;
  }
  // 海报名片
  .card {
    width: 375px;
    height: 129px;
    padding: 12px;
    background: #fff;
    transform: scale(0.6826666667);
    transform-origin: left bottom;
    position: absolute;
    bottom:0;
    // 左侧信息
    .card-l {
      float: left;
      max-width: 235px;
      // 名称
      .addr-name {
        line-height: 40px;
        font-size: 20px;
        font-weight: bold;
        letter-spacing: 1px;
      }
      //价格
      .price-wrap {
        display: flex;
        align-items: flex-end;
        > div {
          margin-right: 9px;
        }
        .price-label {
          width: 55px;
          line-height: 24px;
          border-radius: 5px;
          font-size: 13px;
          text-align: center;
          color: #fff;
          background: linear-gradient(
            -90deg,
            rgba(253, 109, 102, 1) 0%,
            rgba(254, 54, 54, 1) 100%
          );
        }
        .price {
          font-size: 14px;
          color: #fe3939;
          strong {
            font-size: 20px;
          }
          &.price-through {
            line-height: 17px;
            color: #999;
            text-decoration: line-through;
          }
        }
      }
      // 地址
      .addr {
        display: flex;
        margin-top: 15px;
        font-size: 12px;
        color: #999;
        & div:first-child {
          width: 30px;
        }
        & div:last-child {
          flex: 1;
        }
      }
    }
    // 右侧二位码
    .card-r {
      float: right;
      text-align: center;
      .qr {
        margin-top: 8px;
        width: 70px;
        height: 70px;
      }
      p {
        margin-top: 9px;
        font-size: 12px;
        color: #333;
      }
    }
  }
  .ft-wrap {
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: fixed;
    width: 100%;
    height: 98px;
    // margin-top:20px;
    bottom: 0;
    z-index: 999999;
    background: #fff;
    text-align: center;
    img {
      width: 66px;
      height: 66px;
      border:1px #000 dotted;
    }
    p {
      font-size: 14px;
      color: #333;
    }
  }
}
</style>